﻿
@{
    ViewData["Title"] = "StoreShow";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>门店管理列表</h1>

@* 门店查询 *@
<div style="display:flex;width:1000px">
 <div class="layui-form-item">
    <label class="layui-form-label">门店名称</label>
    <div class="layui-input-inline">
        <input type="text" id="storesName" autocomplete="off" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品状态</label>
    <div class="layui-input-inline">
        <select id="storeStatuss" name="storeStatuss">
        <option value=0 selected>请选择</option>
        <option value=1>启用</option>
        <option value=2>禁用</option>
        </select>
    </div>
    </div>

    <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demoTable" lay-event="myBtn">查询</button>
   </div>

  </div>


@* 显示商品 *@
<table class="layui-table" id="demoTables" lay-filter="demoTables">
    <tbody>
        <!-- 这里是动态生成的数据 -->
    </tbody>
</table>

<div id="demo-laypage-all"></div>

@* 商品操作列 *@
<script type="text/html" id="bardemo">
        <a class="layui-btn layui-btn-xs layui-btn-action"   lay-event="yourFunction">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-action" lay-event="deleteNumber">停用</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-action" lay-event="deleteNumber">编辑相册</a>
</script>

<div id="demo-laypage-layout-1"></div>

<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element', 'util', 'laydate','upload'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var form = layui.form;
    var layer = layui.layer;
    var laypage = layui.laypage;
    var element = layui.element;
    var util = layui.util;
    var laydate = layui.laydate;
    var upload=layui.upload;

    $(function () {
        show();
    })

     var from = {
        storesName: "",
        storesState:$("#storeStatuss").val()|| 0,
        index: 1,
        pagesize: 15
    }
     //显示
    function show(callback) {
        $.ajax({
            url: 'http://localhost:5174/api/Store/GetShowStore',
            type: 'post',
            contentType: "application/json",
            data: JSON.stringify(from),
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            async: true,
            success: res => {
                total = res.data.total;
                table.render({
                    elem: '#demoTables',
                    data: res.data.data,
                    //toolbar: '#toolbarDemo',
                    cols: [[
                        { field: 'storesId', title: '门店id' ,hide: true},
                        { field: 'ck', type: 'checkbox', },
                        { field: 'storesName', title: '门店名称' },    
                        { field: 'branchName', title: '分店名称' },
                        { field: 'storesAddress',  title: '门店地址' },
                        { field: 'storesState', title: '门店状态', templet: function(d){
                          if(d.storesState == 1){
                          return '启用';
                         } else if(d.storesState == 2){
                         return '禁用';
                        }
                       }},
                      {
                        field: 'storesState',
                        title: '操作',
                        templet: function (d) {
                        if (d.storesState === 1) {
                         return `<button class="layui-btn layui-btn-danger" lay-event="toggleState">禁用</button>
                         
                          <button  style="background-color: blue;color: white; width: 80px; height: 40px;" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editAlbum" >编辑相册</button>`;
                        }
                        if (d.storesState === 2) {
                          return `<button  style="background-color: green;color: white; width: 80px; height: 40px;" class="layui-btn layui-btn-primary" lay-event="toggleState">启用</button>
                         
                          <button  style="background-color: blue;color: white; width: 80px; height: 40px;" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editAlbum" >编辑相册</button>`;
                         }
                        }
                       }
                       ]],
                       page:true,
                       limits:[5,10,15],
                       limit:5
                      });
                      //如果传入回调函数，则执行回调函数，并传入总条数
                      if(typeof callback==='function')
                      {
                          callback(total);
                      }
                     },
            error: function (error) {
                console.error(error);
            }
        })
    }


   // document.querySelector('[name="storesState"]').checked = true;
        //查询
    $(document).on('click', '[lay-event="myBtn"]', function () {

        from.storesName = $("#storesName").val()
        from.storesState = $("#storeStatuss").val()
        // 处理点击事件的逻辑
        show();
    });

    // 监听操作列中按钮的点击事件
        table.on('tool(demoTables)', function (obj) {
            var data = obj.data;
            if (obj.event === 'toggleState') {
                // 发送 Ajax 请求来更新状态
                $.ajax({
                    url: 'http://localhost:5174/api/Store/GetStoreState',  // 假设这是更新状态的 URL
                    type: 'post',
                    contentType: "application/json",
                    data: JSON.stringify({ storesId: data.storesId, storesState: data.storesState === 1? 2 : 1 }),  // 根据当前状态发送新状态
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    async: true,
                    success: function (response) {
                        // 切换本地状态
                        data.storesState = data.storesState === 1? 2 : 1;
                        layer.msg(data.storesState === 1? '已启用' : '已禁用');
                        // 重新渲染表格
                        table.reload('demoTables', {
                            data: [data]
                        });
                        show();
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            }
             if (obj.event === 'editAlbum') {
                // console.log(data.storesId)
                //localStorage.setItem('storeId', data.storesId);
                // 处理编辑相册按钮的点击逻辑，这里直接跳转到指定页面
                //window.location.href = obj.href;
                window.location.href='EditPhoto?storesId='+data.storesId;
            }
            if(obj.event === 'bianji') {

            }

        });

       

    });


</script>
